<template>
  <el-row>
    <el-table
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="phoneData"
      border
      :stripe="true"
      style="width: 100%;"
    >
      <el-table-column
        prop="contactName"
        :label="tableText['name']"
        min-width="100"
      />
      <el-table-column
        prop="contactPhone"
        :label="tableText['phone']"
        min-width="150"
      />
      <el-table-column
        prop="phoneNumStatus"
        :label="tableText['status']"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.phoneNumStatus !== null ? $t('authModule.contactPerson.state')[scope.row.phoneNumStatus] : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        :label="tableText['lastUpdated']"
        min-width="150"
      />
      <el-table-column
        prop="modifyOperatorName"
        :label="tableText['updater']"
        min-width="100"
      />
      <el-table-column
        :label="tableText['operation']"
        min-width="250"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="setContactState(scope.row, 1)">{{ $t('authModule.contactPerson.connectedNot') }}</el-button>
          <el-button type="text" @click="setContactState(scope.row, 2)">{{ $t('authModule.contactPerson.shutdown') }}</el-button>
          <el-button type="text" @click="setContactState(scope.row, 3)">{{ $t('authModule.contactPerson.emptyNumber') }}</el-button>
          <el-button type="text" @click="setContactState(scope.row, 4)">{{ $t('authModule.contactPerson.knowNot') }}</el-button>
          <el-button type="text" @click="setContactState(scope.row, 5)">{{ $t('authModule.contactPerson.available') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>

<script>
export default {
  name: 'AddressBook',
  props: {
    phoneData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tableText: {}
    }
  },
  mounted() {
    this.tableText = this.$t('authModule.contactPerson')
  },
  methods: {
    setContactState(item, index) {
      this.$emit('set-contact-state', item, index)
    }
  }
}
</script>

<style scoped>

</style>
